<template>
    <a-layout>
        <Header/>
        <a-layout>
            <a-layout-sider width="200" style="background: #fff;height: calc(100vh - 64px - 70px)">
                <a-menu
                        v-model:selectedKeys="selectedKeys"
                        :openKeys="openKeys"
                        @openChange="onOpenChange"
                        mode="inline"
                        :style="{ height: '100%', borderRight: 0 }"
                >
                    <a-sub-menu v-for="(item,index) in menuList" :key="'sub' + (index + 1)">
                        <template #title>
                            <span>{{item.name}}</span>
                        </template>
                        <a-menu-item v-for="(val,i) in item.children" :key="val.url">
                            <router-link :to="val.url">{{val.name}}</router-link>
                        </a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </a-layout-sider>
            <a-layout>
                <router-view
                        style="padding: 0 24px;height: calc(100vh - 64px - 70px);overflow-y: scroll;overflow-x: hidden"/>
            </a-layout>
        </a-layout>
        <Footer/>
    </a-layout>
</template>

<script>
    import {defineComponent, reactive, toRefs, ref, onMounted} from 'vue';
    import Header from "@/components/Header.vue";
    import Footer from "@/components/Footer.vue";
    import {SessionStorage} from '../../public/session-storage.js'
    import axios from 'axios'

    export default defineComponent({
        name: 'HomeView',
        components: {
            Footer,
            Header
        },
        setup() {
            const menuList = ref()
            const loginUser = ref({})
            const state = reactive({
                rootSubmenuKeys: ['sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6', 'sub7'],
                openKeys: ['sub1'],
                selectedKeys: [],
            });

            const onOpenChange = (openKeys) => {
                const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
                if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                    state.openKeys = openKeys;
                } else {
                    state.openKeys = latestOpenKey ? [latestOpenKey] : [];
                }
            };

            const load = () =>{
                axios.get('/permission/queryByRoleId/' + loginUser.value.roleId).then(rs=>{
                    console.log("权限列表",rs)
                    menuList.value = listToTree(rs.data.data)
                })
            }

            const listToTree = list => {
                let rs = []
                list.forEach(val => {
                    if (val.parentId == 0) {
                        let children = []
                        list.forEach(value => {
                            if (value.parentId == val.id) {
                                children.push(value)
                            }
                        })
                        val.children = children
                        rs.push(val)
                    }
                })
                return rs.length == 0 ? list : rs
            }

            onMounted(() => {
                loginUser.value = SessionStorage.get("loginUser")
                load()
            })

            return {
                ...toRefs(state),
                onOpenChange,
                loginUser,
                menuList
            }
        }
    });
</script>
